<template>
  <!-- 荣誉记录 -->
  <div>
    <a-table bordered :columns="departmentHonorsColums" :dataSource="data" rowKey="id" :pagination="false">
      <template slot="fileUpload" slot-scope="text, record">
        <a-upload
          :default-file-list="record.fileList || []"
          :beforeUpload="beforeUpload"
          :onChange="info => handleUploadChange(info, record)"
          :customRequest="handleCustomRequest"
          list-type="picture-card"
        >
          <a-button> <a-icon type="upload" /> 上传图片 </a-button>
        </a-upload>
      </template>
    </a-table>
    <div class="pagination-wrapper">
      <a-pagination v-model="current" :total="50" show-less-items :pageSize="pageSize" @change="paginationChange" />
    </div>
  </div>
</template>

<script>
import { DepartmentColums, DepartmentTabs, DepartmentHonorsColums, EquityInformationColums } from './infoTabs'

export default {
  name: 'HonorRecords',
  props: {
    departmentHonorsData: Array
  },
  computed: {
    departmentHonorsColums() {
      return DepartmentHonorsColums
    }
  },
  data() {
    return {
      data: [
        {
          id: 1,
          title: '荣誉A',
          level: '一级',
          date: '2021-05-12',
          fileList: []
        },
        {
          id: 2,
          title: '荣誉B',
          level: '二级',
          date: '2022-03-14',
          fileList: []
        }
      ],
      current: 1,
      pageSize: 10
    }
  },
  methods: {
    beforeUpload(file) {
      // 验证文件类型和大小
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJpgOrPng) {
        this.$message.error('只能上传 JPG/PNG 文件!')
      }
      if (!isLt2M) {
        this.$message.error('图片必须小于 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    handleUploadChange(info, record) {
      // 确保 record 存在，并更新文件列表
      if (record) {
        record.fileList = [...info.fileList]
      }
    },
    handleCustomRequest({ file, onSuccess }) {
      // 模拟上传操作
      setTimeout(() => {
        onSuccess('ok')
      }, 1000)
    },
    // 分页
    paginationChange(page) {
      this.current = page
    }
  }
}
</script>

<style scoped>
.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
